/*
 * transitionN: N代表过渡动画几秒
 * transition2： 2s过渡动画
 * 
 * 默认 1 -->> 5s
*/

.transition{transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s}
.transition2{transition:all 2s;-webkit-transition:all 2s;-moz-transition:all 2s}
.transition3{transition:all 3s;-webkit-transition:all 3s;-moz-transition:all 3s}
.transition4{transition:all 4s;-webkit-transition:all 4s;-moz-transition:all 4s}
.transition5{transition:all 5s;-webkit-transition:all 5s;-moz-transition:all 5s}

/******************************
 * 
 * 	X轴或Y轴平移
 * 
 * 		transform-translate-xX-yY  平移到（x, y)代表（X, Y）
 * 		transform-translate-x100-y0 代表平移（0, 0）到（100， 0）或（100， 0）到（0，0）
 *		transform-translate-x-100-y0 代表平移（0, 0）到（-100， 0）或（-100， 0）到（0，0）
 * 
 * 		默认X轴 （-300， 0）-->> (300，0)
 * 		默认Y轴 （0， -300）-->> (0，300)
 */
.transform-translate-x100-y0{-webkit-transform:translate(100px,0);-moz-transform:translate(100px,0);transform:translate(100px,0);-o-transform:translate(100px,0);opacity:0}
.transform-translate-x200-y0{-webkit-transform:translate(200px,0);-moz-transform:translate(200px,0);transform:translate(200px,0);-o-transform:translate(200px,0);opacity:0}
.transform-translate-x300-y0{-webkit-transform:translate(300px,0);-moz-transform:translate(300px,0);transform:translate(300px,0);-o-transform:translate(300px,0);opacity:0}
.transform-translate-x-100-y0{-webkit-transform:translate(-100px,0);-moz-transform:translate(-100px,0);transform:translate(-100px,0);-o-transform:translate(100px,0);opacity:0}
.transform-translate-x-200-y0{-webkit-transform:translate(-200px,0);-moz-transform:translate(-200px,0);transform:translate(-200px,0);-o-transform:translate(-200px,0);opacity:0}
.transform-translate-x-300-y0{-webkit-transform:translate(-300px,0);-moz-transform:translate(-300px,0);transform:translate(-300px,0);-o-transform:translate(-300px,0);opacity:0}

.transform-translate-x0-y100{-webkit-transform:translate(0,100px);-moz-transform:translate(0,100px);transform:translate(0,100px);-o-transform:translate(0,100px);opacity:0}
.transform-translate-x0-y200{-webkit-transform:translate(0,200px);-moz-transform:translate(0,200px);transform:translate(0,200px);-o-transform:translate(0,200px);opacity:0}
.transform-translate-x0-y300{-webkit-transform:translate(0,300px);-moz-transform:translate(0,300px);transform:translate(0,300px);-o-transform:translate(0,300px);opacity:0}
.transform-translate-x0-y-100{-webkit-transform:translate(0,-100px);-moz-transform:translate(0,-100px);transform:translate(0,-100px);-o-transform:translate(0,-100px);opacity:0}
.transform-translate-x0-y-200{-webkit-transform:translate(0,-200px);-moz-transform:translate(0,-200px);transform:translate(0,-200px);-o-transform:translate(0,-200px);opacity:0}
.transform-translate-x0-y-300{-webkit-transform:translate(0,-300px);-moz-transform:translate(0,-300px);transform:translate(0,-300px);-o-transform:translate(0,-300px);opacity:0}


/*
 * scale() 缩放
 * 		例如设置图片从小到大恢复完整的特效
 * 
 * scale() rotateX/Y/Z()缩放旋转
 * 		例如设置图片从小到大旋转恢复完整的特效
 * 
 * rotateX() 绕着X轴旋转，rotateY()绕着Y轴旋转，rotateZ()绕着Z轴旋转
 * 
 * transform-sacle 只缩放恢复完整
 * transform-rotateX90 只旋转绕着X轴90度恢复完整
 * transform-sacle-rotateZ 缩放旋转360度
 * transform-sacle-rotateX90 缩放旋转90度
 */
.transform-sacle{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:scale(.1);-moz-transform-origin:50% 50%;-moz-transform:scale(.1);-ms-transform-origin:50% 50%;-ms-transform:scale(.1);-o-transform-origin:50% 50%;-o-transform:scale(.1);transform-origin:50% 50%;transform:scale(.1)}
.transform-rotateX90{-webkit-transform-origin:50% 50%;-webkit-transform:rotateX(90deg);-moz-transform-origin:50% 50%;-moz-transform:rotateX(90deg);-ms-transform-origin:50% 50%;-ms-transform:rotateX(90deg);-o-transform-origin:50% 50%;-o-transform:rotateX(90deg);transform-origin:50% 50%;transform:rotateX(90deg)}
.transform-rotateY90{-webkit-transform-origin:50% 50%;-webkit-transform:rotateY(90deg);-moz-transform-origin:50% 50%;-moz-transform:rotateY(90deg);-ms-transform-origin:50% 50%;-ms-transform:rotateY(90deg);-o-transform-origin:50% 50%;-o-transform:rotateY(90deg);transform-origin:50% 50%;transform:rotateY(90deg)}
.transform-rotateZ90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateZ(90deg);-moz-transform-origin:50% 50%;-moz-transform:rotateZ(90deg);-ms-transform-origin:50% 50%;-ms-transform:rotateZ(90deg);-o-transform-origin:50% 50%;-o-transform:rotateZ(90deg);transform-origin:50% 50%;transform:rotateZ(90deg)}
.transform-sacle-rotateZ{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateZ(360deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateZ(360deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateZ(360deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateZ(360deg) scale(.1);transform-origin:50% 50%;transform:rotateZ(360deg) scale(.1)}
.transform-sacle-rotateX{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateX(360deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateX(360deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateX(360deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateX(360deg) scale(.1);transform-origin:50% 50%;transform:rotateX(360deg) scale(.1)}
.transform-sacle-rotateY{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateY(360deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateY(360deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateY(360deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateY(360deg) scale(.1);transform-origin:50% 50%;transform:rotateY(360deg) scale(.1)}
.transform-sacle-rotateX90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateX(90deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateX(90deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateX(90deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateX(90deg) scale(.1);transform-origin:50% 50%;transform:rotateX(90deg) scale(.1)}
.transform-sacle-rotateY90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateY(90deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateY(90deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateY(90deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateY(90deg) scale(.1);transform-origin:50% 50%;transform:rotateY(90deg) scale(.1)}
.transform-sacle-rotateZ90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateZ(90deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateZ(90deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateZ(90deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateZ(90deg) scale(.1);transform-origin:50% 50%;transform:rotateZ(90deg) scale(.1)}













